<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="UTF-8">
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<script type="text/javascript" src="../js/jquery-1.8.0.min.js" ></script>
		<script type="text/javascript" src="../js/mui.min.js" ></script>
		<script type="text/javascript" src="../js/head_public.js" ></script>
		<script type="text/javascript" src="../js/common.js" ></script>
		<script type="text/javascript" src="../js/session.js" ></script>
	</head>
	<body>
		<div id="container"></div>
		<div style="position: relative;">
			<div class="jiaofei-banner">
				<div class="jiaofei-ding">
					<span class="back"><img src="../images/jiafei-back.png"></span>
					<div class="diqu-jiaofei"><img src="../images/ditu-icon.png" width="25"><span id="eara"></span><img src="../images/jiafei-sj1.png"></div>
				</div>
				<div class="jiandan">
					让电梯缴费变得如此简单
				</div>
			</div>
			<div  class="jiaofei-info">
				<div class="user-info">
					<div>
						<img  src="../images/jiaofei-icon.png" id="touxiang"/>
					</div>
					<div class="user-info-name">
						<h1 id="nicheng">昵称</h1>
						<p id="shoujihao"></p>
						<input id="zhanghao" type="hidden"/>
					</div>
				</div>
				<div class="jiaofei-bianhao">
					<div class="jiaofei-xuan" >
						<span class="jiaofei-xuan-first">
							<span></span>
						</span>
						<div class="line"></div>
						<span class="jiaofei-xuan-second">
							<span></span>
						</span>
					</div>
					<div  class="bianhao-info">
						<div style="position: relative;">
							<p>缴费电梯编号</p>
						
							<div class="bh-div bh-div1"><span id="bianhao"></span><img src="../images/jiaofei-sj2.png"></div>
							<!--<ul class="kaohao-list kaohao-list1">-->
								<!--<li>ASDFG111111</li>-->
								<!--<li>ASDFG222222</li>
								<li>ASDFG333333</li>
								<li>ASDFG444444</li>-->
							<!--ul-->
						</div>
						<div style="position: relative;margin-top: 0.5rem;">
							<p>缴费金额</p>
							<input hidden="" id="jiaofei-jiage" />
							<input hidden="" id="type-id" />
							<div class="bh-div bh-div2"><span id="jine"></span><img src="../images/jiaofei-sj2.png"></div>
							<ul class="kaohao-list kaohao-list2" id="pricelist">
								<!--<li>300元/月</li>
								<li>400元/季</li>
								<li>1100元/年</li>	-->
							</ul>
						</div>
					</div>
				</div>
			</div>
			
			<button class="queren-btn-jiaofei">确认缴费</button>
			
			<div class="zhifu-container">
				<div class="menban"></div>
				<div class="zhifu-content">
					<h1><img src="../images/close.png" class="close-icon">在线付款</h1>
					<div class="money" ><span id="money">39.8</span>元</div>
					<div class="zhifu-type" flag="1" type="wxpay_app">
						<img  src="../images/jiaofei-weixin.png"/>
						<span>微信支付</span>
						<div class="quan"><span></span></div>
					</div>
					<div class="zhifu-type" flag="0" type="alipay_app">
						<img  src="../images/jiafei-zhifubao.png"/>
						<span>支付宝</span>
						<div class="quan"><span style="display: none;"></span></div>
					</div>
					<button class="jiao-btn">确认付款</button>
				</div>
			</div>	
		</div>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wqBXfIN3HkpM1AHKWujjCdsi"></script>
		<script>
			
//			百度定位
			var map = new BMap.Map("container");
			var point = new BMap.Point(116.331398,39.897445);
			map.centerAndZoom(point,12);
			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r){
				if(this.getStatus() == BMAP_STATUS_SUCCESS){

                    var gc = new BMap.Geocoder();
                    gc.getLocation(r.point, function (rs) {
                        var addComp = rs.addressComponents;
                        var province = addComp.province;
                        var city = addComp.city;
                        var area = addComp.district;
               	    	$("#eara").html(area);
                        if (province != "" && city != "" && area != "") {
                            $("#demo1").val(province + " " + city + " " + area);
                        }
                    })
				}
				else {
					alert('failed'+this.getStatus());
				}        
			});
		</script>
		<script>
			mui.init();
			mui(".jiaofei-banner").on("tap",".back",function(){
				mui.back()
			})
			mui(".bianhao-info").on("tap",".bh-div1",function(){
				$(".kaohao-list1").show();
			})
			mui(".bianhao-info").on("tap",".bh-div2",function(){
				$(".kaohao-list2").show();
			})
			mui(".bianhao-info").on("tap",".bh-div2",function(){
				$(".kaohao-list2").show();
			})
			
			mui(".kaohao-list1").on("tap","li",function(){
				$("#bianhao").html($(this).html());
				$(".kaohao-list1").hide();
			})		
			mui(".zhifu-content").on("tap",".close-icon",function(){
				
				$(".zhifu-container").hide();
			})
			
			mui(".zhifu-container").on("tap",".zhifu-type",function(){
				if($(this).attr("flag")=="0"){
					$(this).attr("flag","1").siblings(".zhifu-type").attr("flag","0");
					$(this).find(".quan span").show().end().siblings(".zhifu-type").find(".quan span").hide();
				}
			})
			var userid=getCookie("userid");
			   //选择支付方式
			var wxChannel = null; // 微信支付
			var aliChannel = null; // 支付宝支付
			var channel = null;
			mui.plusReady(function(){
				//关闭等待框
				plus.nativeUI.closeWaiting();
				plus.payment.getChannels(function(channels){
					for  (var  i  in  channels)  {
			            if  (channels[i].id  ==  "wxpay")  {
			                    wxChannel  =  channels[i];
			            }  else  {
			                    aliChannel  =  channels[i];
			            }
			        }
			    },function(e){
			        alert("获取支付通道失败："+e.message);
			    });
		   });	
				 //		 检测是否安装支付服务
				function checkServices(pc){
					if(!pc.serviceReady){
						var txt=null;
						switch(pc.id){
							case 'alipay':
							txt='检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？';
							break;
							default:
							txt='系统未安装“'+pc.description+'”服务，无法完成支付，是否立即安装？';
							break;
						}
						plus.nativeUI.confirm(txt, function(e){
							if(e.index==0){
								pc.installService();
							}
						}, pc.description);
					}
				}
				if(userid==null||userid==""){
					alert("您还没有登录，请先登录")
					location.href="../public/login.html"
				}else{
					var param={};
					param.member_id=userid;
					//获取套餐类型
					$.post(net+"/public/index.php?s=api/Predeposit/pay_elevator/",param,function(res){
						if(res.code=="200"){
							$("#bianhao").html(res.result.ecode);
							if(res.result.combo!=null&&res.result.combo.length!=0){
								var str="";
								$.each(res.result.combo, function(index,val) {
									var price="";
									if(this.code=="包年套餐"){
										str+="<li data-id='"+this.id+"'>"+this.price+"元/年<input type='hidden' value='"+this.price+"'></li>"
									}else if(this.code=="包月套餐"){
										str+="<li data-id='"+this.id+"'>"+this.price+"元/月<input type='hidden' value='"+this.price+"'></li>"
									}else if(this.code=="包季套餐"){
										str+="<li data-id='"+this.id+"'>"+this.price+"元/季<input type='hidden' value='"+this.price+"'></li>"
									}
								});
								$("#pricelist").append(str)
								
								$("#zhanghao").val(res.result.member_name)
							
								$("#jine").html($("#pricelist li:first-of-type").html())
                             	//点击确认缴费
                             	mui("body").on("tap",".queren-btn-jiaofei",function(){
									var $price=$("#jiaofei-jiage").val()//取的价格
									if($price== null||$price==""){
										alert("请选择类型");
										return false;
									}
									$("#money").html($price)
									$(".zhifu-container").show();
								})
                             	//点解缴费类型取类型内容
                             	mui(".kaohao-list2").on("tap","li",function(){
                             		$("#type-id").val($(this).attr("data-id"))
									$("#jine").html($(this).html());
									$("#jiaofei-jiage").val($(this).find("input").val())
									$(".kaohao-list2").hide();
								})
                             	//点击确认付款
                             	mui("body").on("tap",".jiao-btn",function(){
			                         var params={};
			                         params.member_id=userid;
			                         params.member_name=$("#zhanghao").val();
			                         params.pdr_ecode=$("#bianhao").html();
			                         params.pdr_grand=$("#type-id").val();
			                         params.price=$("#money").html();
			                         console.log(params)
			                         $(".zhifu-type").each(function(i){
			                         	if($(this).attr("flag")=="1"){
			                         		params.pdr_payment_code=$(this).attr("type");
			                         		if(params.pdr_payment_code=="alipay_app"){
				                     			channel=aliChannel;
				                     		}else if(params.pdr_payment_code=="wxpay_app"){
				                     			channel=wxChannel;
				                     		}
			                         	}
			                         })
			                         if( params.pdr_grand==""|| params.pdr_grand==null){
			                         	alert("请选择支付方式")
			                         	return false;
			                         }
			                         if( params.price==""|| params.price==null){
			                         	alert("请选择支付类型")
			                         	return false;
			                         }
			                         if( params.member_name==""|| params.member_name==null){
			                         	alert("参数错误")
			                         	return false;
			                         }
			                         $.post(net+"/public/index.php?s=api/Predeposit/addpdrscharge",params,function(res){
			                         	
			                         	$.ajax({
										      type: "post",
										      async: false,
										      url: net+"/public/index.php?s=api/payment/pd_order",
										      data: res.result,
										      success: function(res){
				       							plus.nativeUI.closeWaiting();  
											      	checkServices(channel);
											        plus.payment.request(channel, res.result, function(result) {
											        	mui.openWindow({url:"jiaofei-list.html"})
											        }, function(e) {
											        	alert("支付失败")
											        });   						  
										      },
										      error: function(error){
										        callback({'code':1,'msg':"网络连接错误"});
										        return false;
										      }
										  });
			                         })
								})
							}
						}else if(res.code=="10001"){
							if(confirm(res.message)){
								location.href="../guanli/diantiinfo.html"
							}else{
								location.href="../public/index.html"
							}
//							
						}
					})
					//调个人信息
					$.post(net+"public/index.php?s=api/member",param,function(res){
						if(res.code=="200"){
		            		$("#touxiang").attr("src", net+res.result.member_avatar)
		            		$("#shoujihao").html("手机号："+res.result.member_mobile)
		            		if(res.result.member_username!=""&&res.result.member_username!=null){
		            			$("#nicheng").html(res.result.member_username)
		            		}
		            	}
					})
					
					
					
				}
		</script>
	</body>
</html>
